<template>
	<view class="content">
		<!-- F1：标题 -->
		<text class="title">{{article.name}}</text>

		<!-- F2：来源和发布时间 -->
		<view class="source">
			<text class="publisher">{{article.author}}</text>
			<text class="time">{{article.createTime}}</text>
		</view>

		<!-- F3：来自话题、讨论人数和点赞人数 -->
		<view class="talkNum">
			<text>来自与话题
				<text style="color: #3388ff ;">#垃圾回收dom活动#</text>
			</text>
			<view class="num">
				<text style="margin: 0 20px;">{{article.visitors}}人访问</text>
				<!-- <text>150123点赞</text> -->
			</view>
		</view>

		<!-- F4：话题内容详情 -->
		<u-parse :content="article.content"></u-parse>

		<!-- F5:相关推荐：2个 -->
		<text class="other">相关推荐</text>
		<uni-list v-for="items in articleRecommend">
			<uni-list-item title="" class="list" clickable @click="loadRerender(items.id)">
				<template v-slot:header>
					<view class="listContainer">
						<text class="listContainer-title">{{items.name}}</text>
						<text class="listContainer-content" v-html="items.content"></text>
						<text class="listContainer-source">{{items.author}}</text>
					</view>
					<image class="image" :src="getImage(items.images)" mode="aspectFill"></image>
				</template>
			</uni-list-item>

		</uni-list>
	</view>
</template>

<script>
	import findingApi from '../../../common/FindingService/FindingApi';
	export default {
		data() {
			return {
				id: '',
				article: [],
				articleRecommend: [],
			}
		},
		methods: {

			// 从对象存储中获取图片
			getImage(image) {
				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
			},
			goToBack() {
				uni.redirectTo({
					url: '../finding'
				})
			},
			// 相关推荐点击后重新渲染上面的文章
			loadRerender(id) {
				this.querySpecificArticle(id)
			},

			articleRecommendList() {
				uni.request({
					url: 'http://43.136.172.73/api/v1/article/recommend/2',
					header: {
						"Authorization": "sfsdf" //自定义请求头信息
					},
					success: (res) => {
						console.log('成功查询到推荐文章：',res.data.data)
						this.articleRecommend=res.data.data
					}
				});
			},

			querySpecificArticle(id) {
				uni.request({
					url: 'http://43.136.172.73/api/v1/article/' + id,
					header: {
						"Authorization": "sfsdf" //自定义请求头信息
					},
					success: (res) => {
						console.log('根据id查询具体文章：', res.data.data)
						this.article = res.data.data
						this.article.createTime = this.article.createTime.split('T')[0]
						uni.request({
							url: 'http://43.136.172.73/api/v1/article/update_browse/' + id,
							header: {
								"Authorization": "sfsdf" //自定义请求头信息
							},
							method:'PUT',
							success:(res)=>{
								console.log('访问量++',res)
							}
						});
					}
				});
				
			},
		},
		onLoad(e) {
			this.id = e.id;
			// 根据id请求一篇具体的文章
			this.querySpecificArticle(this.id)

			// 相关推荐文章
			this.articleRecommendList()
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 40rpx;
	

		.title {
			text-align: center;
			font-weight: bold;
			font-size: 1.2em;
		}

		.source {
			width: 100%;
			margin-left: $uni-spacing-row-base*3;
			margin-top: $uni-spacing-row-base;

			.publisher {
				margin-right: $uni-spacing-col-lg;
			}

			.time {
				color: $uni-text-color-grey;
				font-size: 0.8em
			}
		}

		.talkNum {
			width: 90%;
			margin: $uni-spacing-col-lg 0 $uni-spacing-col-lg*2;
			background-color: $uni-bg-color-hover;
			border-radius: $uni-border-radius-lg;
			padding: $uni-spacing-col-base;
			color: $uni-text-color-placeholder;

			.num {
				text-align: right;
				margin-top: $uni-spacing-col-sm;
				font-size: 0.8em
			}
		}

		.article {
			.article-content {
				text-indent: 2em;
			}

			.article-img {
				width: 90%;
				left: 5%;
				border-radius: $uni-border-radius-lg;
				margin: $uni-spacing-col-lg 0;
			}
		}

		.other {
			font-weight: bold;
			font-size: 1.2em;
			margin: $uni-spacing-col-lg*2 0;
			position: relative;
			left: -40%;
		}

		.list {
			width: 90vw;
			border: 1px solid $uni-text-color-disable ;
			border-radius: $uni-border-radius-lg;
			margin: $uni-spacing-col-lg 0;

			/deep/ .uni-list-item__container {
				padding: $uni-spacing-col-base $uni-spacing-col-sm;
			}

			.listContainer {
				width: 60%;
				display: flex;
				flex-direction: column;
				margin-right: $uni-spacing-row-base;
				margin-left: $uni-spacing-row-base;

				.listContainer-title {
					font-weight: bold;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.listContainer-content {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-placeholder;
					margin: $uni-spacing-col-base 0;
					@include ellipsis-2;

				}

				.listContainer-source {
					font-size: $uni-font-size-base;
					color: $uni-text-color-placeholder;
				}
			}

			.image {
				width: 40%;
				height: auto;
				margin-right: $uni-spacing-row-sm;
				border-radius: $uni-border-radius-lg;
			}

			/deep/ .uni-list-item__content {
				padding: 0;
			}
		}
	}
</style>